<template>
    <playGround v-if="$store.state.pk.status === 'playing'"/>
    <MatchGround v-if="$store.state.pk.status === 'matching'"></MatchGround>
    <ResultBoard v-if="$store.state.pk.loser !== 'none'"/>
</template>

<script>
import playGround from '@/components/playGround'
import MatchGround from '@/components/MatchGround'
import { onUnmounted, onMounted } from 'vue';
import { useStore } from 'vuex';
import ResultBoard from '@/components/ResultBoard'

export default {
    components: {
        playGround,
        MatchGround,
        ResultBoard
    },

    setup() {
        const store = useStore();
        const socketUrl = `ws://localhost:3000/websocket/${store.state.user.token}`;
        let socket = null;
        store.commit("updateLoser", "none");
        store.commit("updateIsRecord", false);

        onMounted(() => {
            store.commit("updateOpponent", {
                username: "我的对手",
                photo: "https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png"
            })
            socket = new WebSocket(socketUrl); // 创建一个socket

            socket.onopen = () => { // 当连接成功建立之后
                console.log("connected !! ");
                store.commit("updateSocket", socket);
            },
            socket.onmessage = (message) => { // 当接受到信息的时候
                const data = JSON.parse(message.data);
                console.log(data);
                // 从后端传过来的数据
                if (data.event == "start-matching") {
                    store.commit("updateOpponent", {
                        username: data.opponent_username,
                        photo: data.opponent_photo,
                    });
                    setTimeout(() => {
                        store.commit("updateStatus", "playing");
                    }, 200);

                    store.commit("updateGame", data.game);
                } else if (data.event === "move") {
                    const game = store.state.pk.gameObject;
                    const [snake0, snake1] = game.snakes;
                    snake0.set_direction(data.a_direction);
                    snake1.set_direction(data.b_direction);
                } else if (data.event === "result") {
                    const game = store.state.pk.gameObject;
                    const [snake0, snake1] = game.snakes;

                    if (data.loser === 'all' || data.loser === 'A') {
                        snake0.status = "die";
                    }
                    if (data.loser == 'all' || data.loser === 'B') {
                        snake1.status = 'die';
                    }

                    store.commit("updateLoser", data.loser);
                }
            },
            socket.onclose = () => {
                console.log("close !! ");
            }
        });

        onUnmounted(() => { // 当页面被卸载的时候断开连接
            socket.close();
            store.commit("updateStatus", "matching");
        })
    }
}
</script>

<style scoped>

</style>